<template>
  <div class="nav-bar">
    <van-nav-bar left-arrow>
      <template #left>
        <slot name="left">
          <i v-if="showIcon" class="left-icon" @click="handleLeftClick"></i>
          <span class="left-text">{{ leftText }}</span>
        </slot>
      </template>
      <template #title>
        <slot name="title">{{ title }} </slot>
      </template>
      <template #right>
        <slot name="right">
          <i class="right-icon" @click="handleRightClick"></i>
        </slot>
      </template>
    </van-nav-bar>
    <van-popup v-model:show="show" position="right" :style="{ left: '40%' }" closeable>
      <div class="rightPopUp">
        <div class="PopUpTe">
          <div class="PopUp-item">
            <div class="item" @click="goHomeClick">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-home.png" alt="" /> 首页
            </div>
            <div class="line"></div>
            <div class="item">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-me.png" alt="" /> 我的
            </div>
            <div class="item" @click="goOrderClick">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-order.png" alt="" /> 订单
            </div>
            <div class="item" @click="goFavorClick">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-collection.png" alt="" />
              收藏
            </div>
            <div class="item" @click="goMessageClick">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-news.png" alt="" /> 消息
            </div>
            <div class="item">
              <img class="img" src="@/assets/img/tabbar/mob-TjHeader-menu-logout.png" alt="" />
              退出登录
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  const show = ref(false)

  defineProps({
    title: {
      type: String,
      default: '标题'
    },
    leftText: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  })

  const router = useRouter()

  const handleLeftClick = () => {
    router.go(-1)
  }

  const goHomeClick = () => {
    router.push('/home')
  }

  const goOrderClick = () => {
    router.push('/order')
  }

  const goFavorClick = () => {
    router.push('/favor')
  }

  const goMessageClick = () => {
    router.push('/message')
  }

  const handleRightClick = () => {
    show.value = true
  }
</script>

<style lang="less" scoped>
  .left-icon {
    display: inline-block;
    background: url(@/assets/img/common/icon_nav_back.png) 0 0/ 100% 100%;
    width: 8px;
    height: 15px;
  }

  .left-text {
    color: var(--primary-color);

    margin-left: 8px;
    font-weight: 700;
  }

  .right-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: url(@/assets/img/home/icon-right-menu.png);
    background-size: 20px 15px;
  }

  .rightPopUp {
    height: calc(100vh);
    width: 225px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .PopUpTe {
      width: 100%;
      padding: 25px 0 0 40px;
    }
    .PopUp-item {
      margin-top: 30px;
      color: #333;
      font-size: 14px;
      .img {
        height: 16px;
        width: 16px;
        margin-right: 20px;
      }
      .item {
        margin-top: 30px;
      }
      .line {
        border-top: 1px solid #f8f9f9;
        background-color: #e9e9e9;
        margin-top: 30px;
        width: 150px;
      }
    }
  }
</style>
